import React, { Component } from 'react';
import PropTypes from 'prop-types';
import '@/css/comps/wsjframe.css';
class WsjCheckBox extends Component { 
    static propTypes = {
        color: PropTypes.string,
        style: PropTypes.object,
        name:PropTypes.string.isRequired,
        val:PropTypes.string.isRequired,
        text:PropTypes.string.isRequired,
        cb:PropTypes.func,
        checked:PropTypes.bool
    }
    
    static defaultProps = {
        color: '',
        style: {},
        checked:false
    }
    constructor(props) { 
        super(props)
        this.state = {
            checked:this.props.checked || false
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        return !(nextState === this.state)
     }
    render() { 
        let { color,name,val,text,style } = this.props
        return (
            <label className={`wsj-checkbox ${color}  wsj-checkbox-round`}><span className="wsj-ck-a"><input type="checkbox" checked={this.state.checked} name={name} defaultValue={val} onChange={this.getVal} /><span className="ckicon"></span></span><span className="wsj-ck-b" style={style}>{text}</span></label>
       ) 
    }
    getVal = (e) => {                                           
        let { cb, val } = this.props
        this.setState({
            checked:!this.state.checked
        })
        if (e.target.checked) cb(val)
        else cb(null)
    
    }
}



export default WsjCheckBox
